<template>
	<div class="rb">
		<div class="titleput" v-if="showtitle">
			<div class="in">
				<div class="top">
					<div class="mean">请输入新的简历名称</div>
					<div @click="closeTitle" class="close">×</div>
				</div>
				<div class="mid">
					<input type="text" v-model="newname" @keydown.enter="keySub">
					<div @click="closeTitle" class="close">取消</div>
					<div @click="closeTitle(true)">确定</div>
				</div>
			</div>
		</div>
		<router-link class="rusume_page" :to="'/edit'+id" tag="div">
			<img src="images/home_bg.jpeg" alt="" class="myrs">
			<div class="page_outer"></div>
			<img src="../../public/images/page_icon.png" alt="" class="page_dc">
		</router-link>
		<div class="rb_right">
			<div class="rs_title">
				<div class="rs_name">{{resumes[id].title}}</div>
				<div class="rs_uptime"><span>创建时间:{{time}}</span></div>
			</div>
			<div class="rs_do">
				<div class="rename" @click="closeTitle">重命名</div>
				<div class="more" @click='removeResume(id)'>删除</div>
				<div class="download">下载</div>
				<div class="share">分享</div>
			</div>
			<div class="but">
				<router-link :to="'/about'+id" tag="div">预览</router-link>
				<router-link :to="'/edit'+id" tag="div">编辑</router-link>
			</div>
		</div>
	</div>
</template>

<script>
import {mapMutations,mapState} from 'vuex'
export default{
	name:'resumeBut',
	props: {
		id: Number,
	},
	data(){
		return{
			showtitle:false,
			newname: '',
			time: ''
		}
	},
	computed:{
		...mapState(['resumes'])
	},
	created() {
		this.getTime()
	},
	methods:{
		...mapMutations(['removeResume','reName']),
		editResume(id){
			this.$router.push({
				path: `/edit/`+this.id
			})
		},
		keySub(e){
			if(e.keyCode==13){	
				console.log(e.keyCode)
				this.closeTitle(true)
			}
		},
		closeTitle(bool){
			if(bool==true){
				if(this.newname.trim()!=''){
					this.reName([this.newname,this.id])
					this.showtitle = !this.showtitle
				}
			}else{
				this.showtitle = !this.showtitle
			}
		},
		getTime(){
			let t = new Date()
			this.time = t.getFullYear()+'-'+(t.getMonth()+1)+'-'+t.getDate()+'  '+t.getHours()+':'+t.getMinutes()+':'+t.getSeconds()
		}
	}
}
</script>

<style scoped lang="less">
.rb{
	display: flex;
	margin:40px auto;
	width: 75%;
	height: 211px;
	.rusume_page{
		width: 156px;
		height: 216px;
		position: relative;
		background-color: rgba(0,0,0,0.7);
		z-index: 2;
		.page_outer{
			position: absolute;
			top: 0px;
			width: 155px;
			height: 215px;
			background-color: #ccc;
			opacity: 0.3;
			z-index: 2;
			border: 1px dotted #aaa;
		}
		.page_outer:hover{
			opacity: 0.0;
		}
		.page_dc{
			position: absolute;
			top: 0;
			left: 0;
			width: 60px;
			height: 60px;
			z-index: 3;
		}
		.myrs{
			position: absolute;
			top: 3px;
			left: 3px;
			width: 150px;
			height: 210px;
		}
	}
	.rb_right{
		width: 320px;
		height: 100px;
		padding: 5px 0 0 50px;
		text-align: left;
		.rs_title{
			.rs_name{
				font-size: 18px;
				color: #222;
				font-weight: 'Microsoft YaHei';
			}
			.rs_uptime{
				font-size: 12px;
				color: #aaa;
				margin-top: 2px;
			}
		}
		.rs_do{
			width: 100%;
			height: 35px;
			display: flex;
			background-color: #f1f1f1;
			margin-top: 20px;
			div{
				line-height: 35px;
				color: #556;
				font-size: 13px;
				margin-left: 15px;
			}
			div:hover{
				color: #368aff;
			}
		}
		.but{
			display: flex;
			margin-top: 20px;
			div{
				margin-left: 20px;
				width: 55px;
				height: 24px;
				line-height: 24px;
				text-align: center;
				color: #368aff;
				border: 1px solid #ccc;
			}
			div:hover{
				background-color: #368aff;
				color: #fff;
			}
		}
	}
	.titleput{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-color: rgba(0,0,0,0.3);
		.in{
			width: 350px;
			height: 150px;
			margin: 150px auto;
			background-color: #fff;
			.top{
				display: flex;
				background-color: #55aaff;
				line-height: 36px;
				.mean{
					padding-left: 5px;
					color: #fff;
					text-align: center;
					flex: 1;
				}
				.close{
					width: 30px;
					height: 30px;
					font-size: 2rem;
					color: #a77;
					transition: all 0.5s;
				}
				.close:hover{
					transform: scale(1.25);
					color: #fa7;
				}
			}
			.mid{
				input{
					display: block;
					width: 80%;
					font-size: 16px;
					line-height: 25px;
					margin: 18px auto;
					border: 1px solid #ccc;
					outline: none;
				}
				div{
					float: right;
					margin-right: 20px;
					width: 60px;
					line-height: 25px;
					height: 25px;
					color: #fff;
					background-color: #55aaff;
				}
				.close{
					color: #222;
					background-color: #fff;
					border: 1px solid #aaa;
				}
			}
		}
	}
}
</style>
